<!-- 帖子细节 -->
<template>
  <view class="content">
    <div><!-- 返回按钮 -->
      <backButton></backButton>
    </div>
    <div class="postBox"> <!-- 帖子内容 -->
      <!-- 帖子用户头像名称 -->
      <div>
        <button class="user-icon" plain="true" style="left:0%; top: 0%; z-index: 1000;"
          @click="() => goToOwnSpace(postElements[0].userId, postElements[0].userName, postElements[0].iconUrl)">
          <image :src="`https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/${postElements[0].iconUrl}`"
            mode="aspectFill" style="height: 60px; width: 60px;  border-radius: 100%;">
          </image>
        </button>
        <text class="user-name" style="top: 5%; left:26%; z-index: 1000;">{{postElements[0].userName}}</text>
      </div>

      <div class="postBackground">
        <!-- 帖子具体内容 -->

        <div class="tradeDetailText1">
          <text>装备类型：{{tradeType[postElements[0].type]}}</text>
          <text>装备名称：{{postElements[0].name}}</text>
          </text><text>装备细节：<text class="tradeContent">{{postElements[0].content}}</text></text>
          <text>预期价格：{{postElements[0].price}}</text>
          <text>联系方式：{{postElements[0].contact}}</text>
          <!-- 图片区域 -->
          <div style="display: flex;width: 100%; flex-wrap: wrap; margin-top: 5%;">
            <div class="image-box" v-for="(item, index) in imagesArray" :key="index">
              <image class="image-overlay"
                :src="`https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/${item}`" mode="aspectFill"
                @click="showBigImg(item)">
              </image>
            </div>
          </div>

        </div>
      </div>
      <text class="tradeDetailText2">发布时间：{{getTime(postElements[0].createTime)}}</text>
    </div>
    </div>
  </view>
</template>

<script>
  import backButton from '@/components/backButton/backButton.vue';
  export default {
    components: {
      backButton
    },
    data() {
      return {
        tarId: '',
        tarName: '',
        chooseAvatar: '',
        postElements: getApp().globalData.postDetail,
        tradeType: ['球拍', '装备', '羽毛球'],

        imagesArray: []
      }
    },
    mounted() {
      this.scanAdd();
      console.log(this.postElements)

      //将图片路径字符串转成数组
      this.imagesArray = this.postElements[0].imgsUrl.split(',')
      console.log(this.imagesArray)
    },
    methods: {
      getTime(time) { //转换时间戳
        var date = new Date(time);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var Time = Y + M + D;
        return Time
      },
      scanAdd() {
        uni.request({
          url: 'https://www.horizons.wiki/blog/click/1/' + this.postElements[0].id,
          header: {
            'Access-Control-Allow-Headers': 'appId',
            'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
            'Access-Control-Max-Age': 86400,
            'Authorization': '' + wx.getStorageSync('sessionID')
          },
          method: 'GET',
          success: res => {
            console.log('浏览量+1')
          }
        })
      },
      goToOwnSpace(tarId, tarName, chooseAvatar) {
        getApp().globalData.chooseTarId = tarId;
        getApp().globalData.chooseTarName = tarName;
        getApp().globalData.chooseAvatar = 'https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' +
          chooseAvatar;
        uni.navigateTo({
          url: '/pagesA/ownspace/user-space'
        })
      },
      showBigImg(imgs) {
        var path = 'https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + imgs;
        console.log(path)
        uni.previewImage({
          current: '',
          urls: [path],
          success: res => {
            console.log(res)
          },
          fail: res => {
            console.log(res)
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import url("../../static/css/postdetailstyle.scss");

  .content {
    background-image: url('http://s0v3kcpk7.hn-bkt.clouddn.com/static/background/background_1.jpg');
		/* 图片素材background_1.jpg */
    background-size: cover;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .postBox {
    height: 600px;
    width: 320px;
    background-color: #e8e8e8;
    border-radius: 20px;
    border: 1px solid #c8c8c8;
    position: absolute;
    top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .postBackground {
    height: 500px;
    width: 280px;
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #c8c8c8;
    position: absolute;
    top: 5%;
  }

  @mixin textStyle() {}

  .tradeDetailText1 {
    color: black;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 5%;
    top: 10%;
    align-items: flex-start;
  }

  .tradeContent {
    height: 110px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 3%;
    overflow: hidden;
    /* 超出范围省略 */
    -webkit-line-clamp: 6;
    /* 最大行数 */
    text-overflow: ellipsis;
    /* 超出用省略号代替 */
  }

  .tradeDetailText2 {
    color: black;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 5%;
    bottom: 5%;
    align-items: flex-start;
  }

  .image-box {
    margin: 5px;
    width: 60px;
    height: 60px;
  }

  .image-overlay {
    width: 100%;
    height: 100%;
  }
</style>